<template>
  <div class="color-square">
    <div id="purple" :style="purple"></div>
    <div id="red" :style="red"></div>
    <div id="green" :style="green"></div>
    <div id="blue" :style="blue"></div>
  </div>
  <p></p>
  <div>
    <label for="input" >输入<input id="input" type="text" v-model="text"></label>
    <input type="button" value="按钮" @click="change">
  </div>
</template>

<script>

export default {
  name: "app",
  data(){
    return{
      text:"",
      purple:{
        backgroundColor:"purple",
        display:"inline",
        visibility:"visible"
      },
      red:{
        backgroundColor: "red",
        display:"inline",
        visibility:"visible"
      },
      green:{
        backgroundColor: "green",
        display:"inline",
        visibility:"visible"
      },
      blue:{
        backgroundColor: "blue",
        display:"inline",
        visibility:"visible"
      },
    }
  },
  methods:{
    change: function (){
      if(this.text=="red"){
        this.$data.purple.visibility='hidden';
        this.$data.blue.display="none";
        this.$data.green.display="none";
        this.$data.red.display="inline";
        console.log("true");
      }else{
        this.$data.red.display="none";
        this.$data.green.display="none";
        console.log("false");
      }
    },

  },
}
</script>

<style scoped>

</style>